<template>
    <div>
      <el-row>
          <el-col :span="18" style="text-align: left;">
              <el-form :inline="true" :model="queryApplicationForm" class="demo-form-inline">
                  <el-form-item label="仓库">
                      <el-select v-model="queryApplicationForm.warehouseId" placeholder="请选择仓库">
                          <el-option
                          v-for="item in warehouses"
                          :key="item.warehouseId"
                          :label="item.warehouseName"
                          :value="item.warehouseId">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="审核状态">
                      与审核筛选有冲突，取消功能
                      <el-input v-model="queryApplicationForm.checkType" placeholder="请选择审核状态"></el-input>
                  </el-form-item> -->
                  <el-form-item label="部门名称" >
                      <el-select v-model="queryApplicationForm.deptNo" placeholder="请选择部门" clearable>
                          <el-option
                          v-for="item in dept"
                          :key="item.deptno"
                          :label="item.dname"
                          :value="item.deptno">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="申请人">
                      <el-input v-model="queryApplicationForm.applicationEName" placeholder="请输入申请人姓名"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" @click="query">查询</el-button>
                  </el-form-item>
              </el-form>
          </el-col>
          <el-col :span="6" style="text-align: right;">
              <el-button-group>
                  <!-- <el-button type="primary" @click="addApplication">新增</el-button>
                  <el-button type="primary" @click="delApplication">删除</el-button> -->
                  <el-button type="primary" @click="viewProcess">流程图</el-button>
              </el-button-group>
          </el-col>
      </el-row>
  
      <el-row>
          <el-col :span="22" :offset="1">
              <el-table
                  ref="multipleTable"
                  height="600px"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  stripe
                  border
                  highlight-current-row
                  @selection-change="handleSelectionChange">
                  <el-table-column
                  type="selection"
                  align="center"
                  width="40">
                  </el-table-column>
                  <el-table-column
                  prop="applicationId"
                  label="申请编号"
                  align="center"
                  width="80">
                  </el-table-column>
                  <el-table-column
                  prop="applicationName"
                  label="申请类型"
                  align="center"
                  width="80">
                  </el-table-column>
                  <el-table-column
                  prop="applicationEName"
                  label="申请人"
                  align="center"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="dname"
                  label="申请部门"
                  align="center"
                  width="120">
                  </el-table-column>
                  <el-table-column
                  label="归还仓库"
                  align="center"
                  width="120">
                  <template slot-scope="scope">{{ warehouses[scope.row.warehouseId - 1].warehouseName }}</template>
                  </el-table-column>
                  <el-table-column
                  prop="comment"
                  label="申请原因"
                  align="left"
                  >
                  </el-table-column>
                  
                  <el-table-column
                  prop="applicationTime"
                  label="申请时间"
                  align="center"
                  >
                  </el-table-column>
                  <!-- <el-table-column
                  prop="auditEName"
                  label="审核人"
                  align="center"
                  width="120">
                  </el-table-column> -->
                  <el-table-column 
                  prop="checkTime"
                  label="审核时间"
                  align="center"
                  >
                  </el-table-column>
                  <el-table-column
                  label="审核状态"
                  align="center"
                  width="100">
                  <template slot-scope="scope"> 
                    <span v-if="scope.row.checkType==1" type="success">scope.row.checkTypeDESC</span>
                    <span v-if="scope.row.checkType==2" type="danger">仓管员审核</span>
                    <span v-if="scope.row.checkType==3 || scope.row.checkType==4">审核结束</span>
                  </template>
                  </el-table-column>
                  
                  <el-table-column label="操作" align="center" width="100">
                      <template slot-scope="scope">
                          <el-button
                          size="mini"
                          @click="rowEditApplication(scope.$index, scope.row)" v-if="scope.row.checkType == 2">审核申请</el-button>
                          <el-button
                          size="mini"
                          @click="viewApplication(scope.$index, scope.row)" v-if="scope.row.checkType != 2">查看申请</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 15, 20]"
              :page-size="100"
              layout=" prev, pager, next, total, sizes,jumper"
              :total="total">
              </el-pagination>
          </el-col>
      </el-row>
      <ReturnProcess :isShow="dialogVisible" :appplicationCheckType="proseccCheckType" @closeDialog="closeDialog"></ReturnProcess>
    </div>
  </template>
  
  <script>
    import ReturnProcess from '@/components/ReturnProcess.vue';
  export default {
      name: 'CheckRApplicationManager',
      components: {
        ReturnProcess
    },
      data(){
          return{
              queryApplicationForm: {
                  warehouseId:"",
                  checkType:2,
                  deptNo:'',
                  applicationEmpNo:0,
                  applicationEName:'',
                  applicationName:"归还申请",
                  filter:true,
                  current:1,
                  size:10
              },
              warehouses:[],
              tableData: [],
              total:0,
              checkData:[],
              dept:[],
              user:{
                empno:0,
                role:''
              },
              readProcessId:0,
            proseccCheckType:0,
            dialogVisible:false
          }
      },
      methods:{
          query(){
              this.$http.post("/lc/getApplicationWithQueryApplicationDTO",this.queryApplicationForm).then(res => {
                  this.tableData = res.data.data;
                  this.total = res.data.total;
              }).catch(e => {
                this.$message.error("查询失败")
              })
          },

          viewProcess(){
            if (this.checkData.length != 1){
                this.$message.error("请选择一条数据")
                return
            }
            this.proseccCheckType = this.checkData[0].checkType
            this.dialogVisible = true
            },
            closeDialog(){
                this.dialogVisible = false
                this.proseccCheckType = 0
            },

          getWarehouse(){
              this.$http.get("/lc/queryWarehouseByEmpNo?empNo="+this.user.empno).then(res => {
                  this.warehouses = res.data;
                  this.queryApplicationForm.warehouseId = this.warehouses[0].warehouseId
                  this.query()
              }).catch(error => {
                  console.log('未能正常获取仓库信息')
              })
          },
          getDept(){
              this.$http.get("/lc/getDepts").then(res => {
                  this.dept = res.data;
              }).catch(error => {
              console.log('未能正常获取部门信息')
            })
          },
          process(){

          },
          handleSelectionChange(val){
              this.checkData = val
          },
          handleCurrentChange(val){
              this.queryApplicationForm.current = val;
              this.query()
          },
          handleSizeChange(val){
              this.queryApplicationForm.size = val;
              this.query()
          },
          rowEditApplication(index,row){ 
              // console.log(row)
            row.dName = row.dname
            this.$router.push({
                path:"/checkRApplication",
                query:{
                    applicationInfo:row,
                    // applicationGoods:res.data,
                    warehouses:this.warehouses,
                    readonly:false,
                //   fromPath:this.$route.path
                }
            })
          },
          viewApplication(index,row){
              // console.log(row)
            row.dName = row.dname
            this.$router.push({
                path:"/checkRApplication",
                query:{
                    applicationInfo:row,
                    // applicationGoods:res.data,
                    warehouses:this.warehouses,
                    readonly:true,
                //   fromPath:this.$route.path
                }
            })
          }
      },
      mounted(){
        this.user.empno = localStorage.getItem("empno")
        this.user.role = localStorage.getItem("roleid")
          this.getWarehouse()
          
        //   this.query()
          this.getDept()
          if (this.$route.query.msg != null){
              this.$message.success(this.$route.query.msg)
          }
          
          
      }
  
  }
  </script>
  
  <style>
  
  </style>